<!-- 舌诊结果 -->
<template>
  <view class="tongue-result-container">
    <scroll-view scroll-y class="scroll-view">
      <view class="content-wrapper">
        <view class="user-info-card">
          <view class="user-info">
            <image :src="userInfo.avatar" class="avatar"></image>
            <view class="info-text">
              <view class="name">{{ userInfo.username }}</view>
              <view class="date">{{ resultData.createTime || formattedDate }}</view>
            </view>
          </view>
          <view class="score-circle">
            <text class="score">{{ resultData.medicine_total || "93" }}</text>
          </view>
        </view>
        <view class="content-card">
          <view class="main-tabs">
            <view class="tab-item" :class="{ active: activeTab === 'diagnosis' }" @click="activeTab = 'diagnosis'">{{$t('tongueResult.diagnosis')}}</view>
            <view class="tab-item" :class="{ active: activeTab === 'advice' }" @click="activeTab = 'advice'">{{$t('tongueResult.advice')}}</view>
          </view>

          <view v-if="activeTab === 'diagnosis'">
            <view class="diagnosis-card">
              <view class="main-result">{{ resultData.result }}</view>
              <view class="result-explanation">{{ resultData.explanation }}</view>
            </view>

            <view class="diagnosis-card">
              <view class="card-title">{{$t('tongueResult.summary')}}</view>
              <view class="tongue-diagram">
                <image
                  class="diagram-bg"
                  src="/static/tongue_result/tongue_01.png"
                  mode="widthFix"
                />
                <view class="overlay-image-wrapper">
                  <image class="overlay-image" :src="resultData.tongue_front_img" mode="aspectFill" />
                  <view class="overlay-mask">
                    <text>舌诊</text>
                    <text>图像</text>
                  </view>
                </view>
              </view>
            </view>

            <!-- 舌象分析 (舌形/苔质) Tab模块 -->
            <view class="diagnosis-card" v-for="(group, dataType) in groupedTongueShapes" :key="dataType">
              <view class="card-title">{{ getShapeTitle(dataType) }}</view>
              <view class="tag-group">
                <view
                  v-for="(item, index) in group"
                  :key="item.id"
                  class="tag"
                  :class="{ active: (shapeTabStates[dataType] || 0) === index }"
                  @click="shapeTabStates[dataType] = index"
                >
                  {{ item.type }}
                </view>
              </view>
              <view class="tag-explanation" v-if="group[shapeTabStates[dataType] || 0]">
                <text class="tag-title-highlight">{{ group[shapeTabStates[dataType] || 0].type }}：</text>
                {{ group[shapeTabStates[dataType] || 0].explain }}
              </view>
            </view>

            <!-- 苔色 优化模块 -->
            <view class="diagnosis-card">
              <view class="card-title">{{$t('tongueResult.tongueColor')}}</view>
              <view class="color-progress-bar">
                <view class="progress-line"></view>

                <view class="dot" :class="{ active: resultData.tonguefurcolour_type === $t('tongueResult.whiteCoating') }" style="left: 0%">
                  <text>{{$t('tongueResult.whiteCoating')}}</text>
                </view>
                <view class="dot" :class="{ active: resultData.tonguefurcolour_type === $t('tongueResult.yellowCoating') }" style="left: 50%">
                  <text>{{$t('tongueResult.yellowCoating')}}</text>
                </view>
                <view class="dot" :class="{ active: resultData.tonguefurcolour_type === $t('tongueResult.grayBlackCoating') }" style="left: 100%">
                  <text>{{$t('tongueResult.grayBlackCoating')}}</text>
                </view>
              </view>
              <view class="tag-explanation">
                <text class="tag-title-highlight">{{ resultData.tonguefurcolour_type }}：</text>
                {{ resultData.tonguefurcolour_explain }}
              </view>
            </view>

            <!-- 舌下络脉 -->
            <view class="diagnosis-card">
              <view class="sublingual-header">
                <view class="card-title no-margin">{{$t('tongueResult.sublingualAnalysis')}}</view>
                <view class="sublingual-image-group">
                  <view class="click-tip">
                    <text>{{$t('tongueResult.sublingualRight')}}</text>
                    <text>{{$t('tongueResult.clickToView')}}</text>
                  </view>
                  <image
                    :src="resultData.tongue_bottom_img"
                    class="sublingual-image"
                    mode="aspectFill"
                    @click="previewImage(resultData.tongue_bottom_img)"
                  ></image>
                </view>
              </view>
              <view class="result-explanation">{{ resultData.sub_diag_project_detail }}</view>
            </view>
          </view>

          <view v-if="activeTab === 'advice'">
            <view class="corporeity-section" v-if="resultData.corporeityResult && resultData.corporeityResult.length > 0"> </view>

            <view class="suggestion-card-group">
              <view class="suggestion-card" @click="activeAdviceTab = 'tcm'">
                <image
                  src="/static/tongue_result/tongue_02.jpg"
                  mode="aspectFill"
                  class="suggestion-bg"
                />
                <view class="suggestion-mask" v-if="activeAdviceTab !== 'tcm'"></view>
                <text class="suggestion-label" :class="{ active: activeAdviceTab === 'tcm' }">{{$t('tongueResult.tcm')}}</text>
              </view>
              <view class="suggestion-card" @click="activeAdviceTab = 'diet'">
                <image
                 src="/static/tongue_result/tongue_03.jpg"
                  mode="aspectFill"
                  class="suggestion-bg"
                />
                <view class="suggestion-mask" v-if="activeAdviceTab !== 'diet'"></view>
                <text class="suggestion-label" :class="{ active: activeAdviceTab === 'diet' }">{{$t('tongueResult.diet')}}</text>
              </view>
            </view>

            <!-- 建议内容 -->
            <view class="diagnosis-card" v-if="activeAdviceTab === 'tcm'">
              <view class="result-explanation">{{ resultData.medicine }}</view>
            </view>

            <view v-if="activeAdviceTab === 'diet'">
              <view class="diagnosis-card">
                <view class="result-explanation">{{ resultData.food }}</view>
              </view>
              <view class="diagnosis-card">
                <view class="diet-item">
                  <view class="diet-title recommend">{{$t('tongueResult.better')}}</view>
                  <view class="diet-text">{{ resultData.food_better }}</view>
                </view>
              </view>
              <view class="diagnosis-card">
                <view class="diet-item">
                  <view class="diet-title avoid">{{$t('tongueResult.worse')}}</view>
                  <view class="diet-text">{{ resultData.food_worse }}</view>
                </view>
              </view>
            </view>

            <view class="disclaimer"> {{$t('tongueResult.disclaimer')}} </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "TongueResultsPage",
  props: { resultData: { type: Object, required: true } },
  data() {
    return {
      activeTab: "diagnosis",
      activeAdviceTab: "tcm",
      activeCorporeityIndex: 0,
      shapeTabStates: {},
    };
  },
  computed: {
    formattedDate() {
      const date = new Date();
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
    },
    currentCorporeity() {
      if (this.resultData.corporeityResult && this.resultData.corporeityResult.length > 0) {
        return this.resultData.corporeityResult[this.activeCorporeityIndex];
      }
      return null;
    },
    groupedTongueShapes() {
      if (!this.resultData.tongueShape) return {};
      return this.resultData.tongueShape.reduce((acc, item) => {
        const key = String(item.data_type);
        if (!acc[key]) acc[key] = [];
        acc[key].push(item);
        return acc;
      }, {});
    },
    userInfo() {
      return this.resultData?.userInfo;
    },
  },
  methods: {
    previewImage(url) {
      uni.previewImage({ urls: [url] });
    },
    getShapeTitle(dataType) {
      switch (Number(dataType)) {
        case 1:
          return this.$t('tongueResult.tongueCoating');
        case 2:
          return this.$t('tongueResult.tongueShape');
        default:
          return this.$t('tongueResult.tongueAnalysis');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tongue-result-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: #afa0ec;
}
.scroll-view {
  flex: 1;
  overflow-y: auto;

  padding-bottom: 160rpx;
}
.content-wrapper {
  padding: 30rpx;
}

/* 用户信息卡片 */
.user-info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 10rpx 0;
  margin-bottom: 20rpx;
}
.user-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  margin-right: 20rpx;
}
.info-text {
  .name {
    font-size: 34rpx;
    font-weight: 500;
  }
  .date {
    font-size: 24rpx;
    opacity: 0.8;
    margin-top: 5rpx;
  }
}
.score-circle {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  .score {
    font-size: 40rpx;
    font-weight: bold;
  }
}

.main-tabs {
  display: flex;
  padding: 30rpx 0 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 30rpx;

  .tab-item {
    padding: 10rpx 0;
    font-size: 32rpx;
    color: #666;
    position: relative;
    transition: all 0.3s ease;

    &:not(:last-child) {
      margin-right: 50rpx;
    }

    &.active {
      color: #9177ff;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: #9177ff;
        border-radius: 3rpx;
      }
    }
  }
}

.content-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 0 30rpx 30rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.diagnosis-card {
  background-color: #fff;

  padding: 30rpx;
  margin-bottom: 24rpx;
  border-bottom: 2rpx dashed #e5e5e5;
}
.diagnosis-card:last-child {
  border-bottom: none;
}
.main-result {
  font-size: 38rpx;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-bottom: 16rpx;
}
.result-explanation {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.card-title {
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  &::before {
    content: "";
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background: #9177ff;
    margin-right: 15rpx;
  }
  &.no-margin {
    margin-bottom: 0;
  }
}

.tongue-diagram {
  position: relative;
  text-align: center;
  .diagram-bg {
    width: 100%;
    height: 320rpx;
  }
  .overlay-image-wrapper {
    position: absolute;
    left: 60%;
    top: 72%;
    transform: translate(-50%, -50%);
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    border: 2rpx solid #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    .overlay-image {
      width: 100%;
      height: 100%;
    }
    .overlay-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 20rpx;
      line-height: 1.1;
    }
  }
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 20rpx;
}
.tag {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  background: #f5f5f5;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  &.active {
    background: #9177ff;
    color: #fff;
    font-weight: 500;
  }
}
.tag-explanation {
  .tag-title-highlight {
    color: #3e86ff;
    font-weight: 500;
  }
}

.color-progress-bar {
  position: relative;

  margin-bottom: 50rpx;
  padding: 50rpx 20rpx;

  .progress-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0rpx;
    right: 0rpx;
    height: 6rpx;
    background: linear-gradient(to right, #9177ff, #ffeb3b, #616161);
    border-radius: 3rpx;
  }

  .dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    background-color: #fff;
    border: 2rpx solid #ddd;
    transition: all 0.3s ease;

    &.active {
      background-color: #9177ff;
      border-color: #9177ff;
      box-shadow: 0 0 12rpx rgba(145, 119, 255, 0.7);
      transform: translate(-50%, -50%) scale(1);
    }

    text {
      position: absolute;
      top: 150%;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
  .dot:last-child text {
    left: 0%;
  }
}

/* 舌下络脉 */
.sublingual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.sublingual-image-group {
  display: flex;
  align-items: center;
  gap: 15rpx;
}
.click-tip {
  color: #999;
  font-size: 24rpx;
  text-align: right;
  line-height: 1.3;
  text {
    display: block;
  }
}
.sublingual-image {
  width: 90rpx;
  height: 90rpx;
  border-radius: 12rpx;
}

.suggestion-card-group {
  display: flex;
  gap: 20rpx;
  margin-bottom: 24rpx;
}
.suggestion-card {
  flex: 1;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  height: 180rpx;
  cursor: pointer;
  .suggestion-bg {
    width: 100%;
    height: 100%;
  }
  .suggestion-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
  }
  .suggestion-label {
    position: absolute;
    left: 20rpx;
    bottom: 20rpx;
    color: #fff;
    font-size: 28rpx;
    padding: 8rpx 24rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 30rpx;
    z-index: 2;
    &.active {
      background: #9177ff;
    }
  }
}
.diet-item {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
}
.diet-title {
  flex-shrink: 0;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 50%;
  font-size: 32rpx;
  color: #fff;
  &.recommend {
    background: #00b38a;
  }
  &.avoid {
    background: #ff6b6b;
  }
}
.diet-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.disclaimer {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  margin-top: 40rpx;
}

/* 页脚 - Updated */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 24rpx;
  padding: 24rpx 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  z-index: 100;
}
.footer-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin: 0;
  &.consult-btn {
    background: #ff6b6b;
    color: white;
  }
  &.mall-btn {
    background-color: #fff;
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
  }
}
</style>
